<template>
	<view class="box">
		<view class="index-bg z-0">
			<image :src="BASE_URL+'/uploads/20250801/e671f0b8e6503c9316e84ba4a129b698.png'" mode="widthFix"></image>
		</view>
		<view class="z-1 main-box">
			<u-navbar :titleStyle='{"color":"#fff"}' leftIconColor='#fff' title="我的家庭" bgColor="transparent"
				@rightClick="rightClick" :autoBack="true" :fixed="false"> </u-navbar>
			<view class="family-list align-items-center color-white fs-26 padding-l-r-30 ">
				<scroll-view scroll-x style="width: 580rpx; ">
					<view class="align-items-center">
						<view class="flex-column align-items-center padding-b-30" :class="{'active':roleIndex == 0}">
							<view class="img-box margin-b-20" @click="getViewInfo(mainUser,-1)">
								<image :src="mainUser.avatar" mode="aspectFill"></image>
							</view>
							<view class="color-white fs-26">{{mainUser.name}}</view>
							<view class="color-white bg-o fs-20 role-box">主账号</view>
							<view class="triangle-img">
								<image src="/static/image/family/triangle-fill.png" mode="aspectFill"></image>
							</view>
						</view>
						<view v-for="(item,index) in familyList" :key="index" :class="{'active':roleIndex == index+1}"
							class="flex-column align-items-center margin-l-20  padding-b-30"
							@click="getViewInfo(item,index)">
							<view class="img-box margin-b-20">
								<image :src="item.avatar" mode="aspectFill"></image>
							</view>
							<view class="color-white margin-t-10 only-1 fs-26">{{item.name}}</view>
							<view class="color-white role-box fs-20">{{item.relation}}</view>
							<view class="triangle-img">
								<image src="/static/image/family/triangle-fill.png" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="flex-1">
				</view>
				<view class="flex-column align-items-center margin-l-20  padding-b-30" @click="add">
					<view class="img-box margin-b-20">

					</view>
					<view class="color-white margin-t-10 fs-26">添加</view>
					<view class="color-white role-box fs-20" style="opacity: 0"> </view>
				</view>
			</view>
			<view class="bg-white padding-30 main-content">
				<view class="justifyContent-spaceBetween align-items-center">
					<view>
						<view class="fs-26 color-4d margin-b-10">
							正在查看
						</view>
						<view class="fs-32 color-0">
							<text class="color-43">{{viewInfo.name}}</text>的档案
						</view>
					</view>
					<view class="edit-box" @click="edit">
						<image src='/static/image/family/edit.png' mode="aspectFill"></image>
					</view>
				</view>

				<view class="fs-26 color-4d justifyContent-spaceBetween margin-t-30 border-radio-14 base-info">
					<view class="flex-column align-items-center">
						<text class="fs-36 color-0 fw-b margin-b-20">{{viewInfo.height||' '}}</text>
						<text class="">身高（cm）</text>
					</view>
					<view class="flex-column align-items-center">
						<text class="fs-36 color-0 fw-b margin-b-20">{{viewInfo.pressure||' '}}</text>
						<text class="">血压（cm）</text>
					</view>
					<view class="flex-column align-items-center">
						<text class="fs-36 color-0 fw-b margin-b-20">{{viewInfo.heart_rate||' '}}</text>
						<text class="">心率(cm)(次/分) </text>
					</view>
				</view>
			</view>
			<view class="bg-white">

				<u-tabs :list="list" @click="clickTabs" lineWidth="66rpx" lineHeight="3rpx" lineColor="#000"></u-tabs>
				<view :class="(tabsIndex == 4)?'bg-white':'bg-f7 padding-20 '">
					<view class="padding-l-r-20 border-radio-14 bg-white" v-if="tabsIndex ==0">
						<view class="list-box align-items-center fs-30 color-333"
							@click="siteHistory('liver_function')">
							<text>肝功能</text>
							<view class="flex-1"> </view>
							<view class="color-70">
								<text>{{form.liver_function || '待完善'}}</text>
							</view>
							<u-icon name="arrow-right" color="#707070" size="18"></u-icon>
						</view>
						<view class="line"></view>
						<view class="list-box align-items-center fs-30 color-333"
							@click="siteHistory('renal_function')">
							<text>肾功能</text>
							<view class="flex-1"> </view>
							<view class="color-70">
								<text>{{form.renal_function || '待完善'}}</text>
							</view>
							<u-icon name="arrow-right" color="#707070" size="18"></u-icon>
						</view>
						<view class="line"></view>
						<view class="list-box align-items-center fs-30 color-333"
							@click="siteHistory('disease_history')">
							<text>过往病史</text>
							<view class="flex-1"> </view>
							<view class="color-70">
								<text>{{form.disease_history || '待完善'}}</text>
							</view>
							<u-icon name="arrow-right" color="#707070" size="18"></u-icon>
						</view>
						<view class="line"></view>
						<view class="list-box align-items-center fs-30 color-333"
							@click="siteHistory('family_disease_history')">
							<text>家族病史</text>
							<view class="flex-1"> </view>
							<view class="color-70">
								<text>{{form.family_disease_history || '待完善'}}</text>
							</view>
							<u-icon name="arrow-right" color="#707070" size="18"></u-icon>
						</view>
						<view class="line"></view>
						<view class="list-box align-items-center fs-30 color-333"
							@click="siteHistory('allergy_history')">
							<text>过敏史</text>
							<view class="flex-1"> </view>
							<view class="color-70">
								<text>{{form.allergy_history || '待完善'}}</text>
							</view>
							<u-icon name="arrow-right" color="#707070" size="18"></u-icon>
						</view>
						<view class="line"></view>
						<view class="list-box align-items-center fs-30 color-333"
							@click="siteHistory('operation_history')">
							<text>手术史</text>
							<view class="flex-1"> </view>
							<view class="color-70">
								<text>{{form.operation_history || '待完善'}}</text>
							</view>
							<u-icon name="arrow-right" color="#707070" size="18"></u-icon>
						</view>
						<view class="line"></view>
						<view class="list-box align-items-center fs-30 color-333" @click="siteHistory('defecate')">
							<text>排便情况</text>
							<view class="flex-1"> </view>
							<view class="color-70">
								<text>{{form.defecate || '待完善'}}</text>
							</view>
							<u-icon name="arrow-right" color="#707070" size="18"></u-icon>
						</view>
						<view class="line"></view>
						<view class="list-box align-items-center fs-30 color-333" @click="siteHistory('micturition')">
							<text>排尿情况</text>
							<view class="flex-1"> </view>
							<view class="color-70">
								<text>{{form.micturition || '待完善'}}</text>
							</view>
							<u-icon name="arrow-right" color="#707070" size="18"></u-icon>
						</view>
					</view>
					<view class="padding-l-r-20 border-radio-14 bg-white" v-else-if="tabsIndex==1">
						<view class="list-box align-items-center fs-30 color-333" @click="siteLive('isSmok')">
							<text>是否抽烟</text>
							<view class="flex-1"> </view>
							<view class="color-70">
								<text>{{liveForm.isSmok || '待完善'}}</text>
							</view>
							<u-icon name="arrow-right" color="#707070" size="18"></u-icon>
						</view>
						<view v-if="liveForm.isSmok">
							<view class="list-input padding-l-r-20 margin-b-30 bg-f7 align-items-center">
								<text>抽烟频率</text>
								<view class="flex-1"> </view>
								<input type="text" v-model="liveForm.smokingFrequency" placeholder="请输入"
									@blur="liveEdit">
								<!-- <text>支</text> -->
							</view>
						</view>
						<view class="line"></view>
						<view class="list-box align-items-center fs-30 color-333" @click="siteLive('isTipple')">
							<text>是否饮酒</text>
							<view class="flex-1"> </view>
							<view class="color-70">
								<text>{{liveForm.isTipple || '待完善'}}</text>
							</view>
							<u-icon name="arrow-right" color="#707070" size="18"></u-icon>
						</view>
						<view v-if="liveForm.isTipple ">
							<view class="list-input padding-l-r-20 bg-f7 align-items-center"
								@click="siteLive('tippleType')">
								<text>哪类酒品为主</text>
								<view class="flex-1"> </view>
								<input type="text" placeholder="请输入" v-model="liveForm.tippleType" @blur="liveEdit">
								<u-icon name="arrow-right" color="#707070" size="18"></u-icon>
							</view>

							<view class="line"></view>
							<view class="list-input padding-l-r-20 margin-b-30 bg-f7 align-items-center">
								<text>饮酒量</text>
								<view class="flex-1"> </view>
								<input type="text" placeholder="请输入" v-model="liveForm.tippleNum" @blur="liveEdit">
								<text>两</text>
							</view>
						</view>
						<view class="line"></view>
						<view class="list-box align-items-center fs-30 color-333" @click="siteLive('taste')">
							<text>口味偏好</text>
							<view class="flex-1"> </view>
							<view class="color-70">
								<text>{{liveForm.taste || '待完善'}}</text>
							</view>
							<u-icon name="arrow-right" color="#707070" size="18"></u-icon>
						</view>
						<view class="line"></view>
						<view class="list-box align-items-center fs-30 color-333" @click="siteLive('movementWeek')">
							<text>运动习惯(每周)</text>
							<view class="flex-1"> </view>
							<view class="color-70">
								<text>{{liveForm.movementWeek || '待完善'}}</text>
							</view>
							<u-icon name="arrow-right" color="#707070" size="18"></u-icon>
						</view>
						<view v-if="liveForm.movementWeek">
							<view class="list-input padding-l-r-20 bg-f7 align-items-center">
								<text>每次运动时长</text>
								<view class="flex-1"> </view>
								<input type="number" placeholder="请输入" v-model="liveForm.movementTime" @blur="liveEdit">
								<text>分</text>
							</view>
						</view>
						<view class="line"></view>
						<view class="list-box align-items-center fs-30 color-333" @click="siteLive('sleep')">
							<text>睡眠时长(每天)</text>
							<view class="flex-1"> </view>
							<view class="color-70">
								<text>{{liveForm.sleep || '待完善'}}</text>
							</view>
							<u-icon name="arrow-right" color="#707070" size="18"></u-icon>
						</view>
					</view>
					<view class="padding-l-r-20 border-radio-14 bg-white padding-b-30" v-else-if="tabsIndex == 2">
						<view v-if="physicalReport && physicalReport.length">
							<view v-for="(item ,index) in physicalReport" class="margin-b-20" :key="index">
								<view class="line" v-if="index"></view>
								<view class="list-title fs-32">
									{{item.check_name}}
								</view>
								<view class="bg-f7 padding-20 fs-28 list-item">
									<view class="margin-b-10">
										体检时间：<text>{{item.check_date}}</text>
									</view>
									<view class="margin-b-10">
										体检报告：<text>{{item.check_describe}}</text>
									</view>
								</view>
								<view class="padding-t-b-20 align-items-center flex-wrap">
									<view v-for="e in item.imagesArr" class="margin-r-20 margin-b-20">
										<u--image :src="BASE_URL+e" width='140rpx' height='140rpx' radius='14rpx'
											mode="widthFix"></u--image>
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view class="padding-t-b-30">
								<u-empty mode="order" text="暂无体检报告">
								</u-empty>
							</view>
						</view>

					</view>
					<view class="padding-l-r-20 border-radio-14 bg-white padding-b-30" v-else-if="tabsIndex == 3">
						<view v-if="medicalRecords && medicalRecords.length">
							<view v-for="(item ,index) in medicalRecords" class="margin-b-20" :key="index">
								<view class="line" v-if="index"></view>
								<!--                                <view class="list-title fs-32">-->
								<!--                                    {{item.check_name}}-->
								<!--                                </view>-->
								<view class=" padding-20 fs-28 list-item">
									<view class="margin-b-10">
										就诊时间：<text>{{item.diagnose_date}}</text>
									</view>
									<view class="margin-b-10">
										诊断报告：<text>{{item.diagnose_result}}</text>
									</view>
									<view class="margin-b-10">
										病情描述：<text>{{item.disease_describe}}</text>
									</view>

									<view class="margin-b-10">
										就诊报告：
										<view class="padding-t-b-20 align-items-center flex-wrap">
											<view v-for="e in item.imagesArr" class="margin-r-20 margin-b-20">
												<u--image :src="BASE_URL+e" width='140rpx' height='140rpx'
													radius='14rpx' mode="widthFix"></u--image>
											</view>
										</view>
									</view>
								</view>

							</view>
						</view>
						<view v-else>
							<view class="padding-t-b-30">
								<u-empty mode="order" text="暂无就医记录">
								</u-empty>
							</view>
						</view>
					</view>
					<view class=" bg-white padding-30" v-else-if="tabsIndex == 4">
						<view v-if="medicineList && medicineList.length">
							<view v-for="(item ,index) in medicineList" class="medication-list padding-20 margin-b-20"
								:key="index">
								<view class="name">{{item.medicine_name}}</view>
								<view>{{item.medicine_dosage}}</view>
								<view class="line"></view>
								<view class="flex-box">
									<view class="flex-column flex-1">
										频率<text>{{item.medicine_frequency}}</text>
									</view>
									<view class="flex-column flex-1">
										天数<text>{{item.medicine_days}}</text>
									</view>
									<view class="time flex-column">
										开药时间<text>{{item.medicine_start_date}}</text>
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view class="padding-t-b-30">
								<u-empty mode="order" text="暂无用药方案">
								</u-empty>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" @cancel="show=false" @confirm="confirm" keyName="label"></u-picker>
		<u-picker :show="liveShow" :columns="liveColumns" @cancel="liveShow=false" @confirm="linveConfirm"
			keyName="label"></u-picker>
	</view>

</template>

<script>
	import {
		familyData,
		historyDetail,
		sickDetail,
		historyEdit,
		liveDetail,
		liveEdit,
		tijianList,
		seeList,
		liveAdd,
		historyAdd,
		medicineList
	} from '@/api/family'

	import $baseUrl from "@/config/index.js"
	const BASE_URL = $baseUrl.baseUrl
	export default {
		data() {
			return {
				BASE_URL,
				columns: [],
				show: false,
				liveShow: false,
				liveColumns: [],
				historyType: '',
				liveType: '',
				form: {
					liver: ''
				},
				liveForm: {
					sleep: ''
				},
				familyList: [],
				mainUser: {},
				viewInfo: {

				},
				roleIndex: 0,
				list: [{
						name: '健康史',
					},
					{
						name: '生活方式',
					},
					{
						name: '体检报告',
					},
					{
						name: '就医记录',
					},
					{
						name: '用药方案 ',
					},
				],
				tabsIndex: 0,
				physicalReport: [],
				medicalRecords: [], //就医记录
				medicineList: [], //用药方案
				isHistoryEdit: false, // 是否编辑
				isLiveEdit: false, // 是否编辑
			}
		},
		onShow() { 
			this.getFamilyData()
		},
		methods: {
			clickTabs(e) {
				this.tabsIndex = e.index
			},
			getViewInfo(item, index) {
				this.roleIndex = index + 1
				// this.viewInfo = item
				this.getInfoDetail(item.id)
			},
			getFamilyData() {
				this.familyList = []
				familyData().then(res => {
					if (res.code == 1) {
						res.data.sick_list.map(item => {
							if (item.relation == '本人') {
								this.mainUser = item
								this.getInfoDetail(item.id)
								this.viewInfo = this.mainUser
							} else {
								this.familyList.push(item)
							}
						})
					}
				})

			},
			add() {
				uni.navigateTo({
					url: "/pageA/family/add"
				})
			},
			edit() {
				uni.navigateTo({
					url: "/pageA/family/add?id=" + this.viewInfo.id
				})
			},
			getInfoDetail(id) {
				this.getSickDetail(id)
				this.getHistoryDetail(id)
				this.getLiveDetail(id)
				this.getTijianList(id)
				this.getSeeList(id)
				this.getMedicineList(id)
			},
			// 健康史
			getHistoryDetail(id) {
				let form = {
					"disease_history": "",
					"family_disease_history": "",
					"allergy_history": "",
					"operation_history": "",
					"defecate": "",
					"micturition": "",
					"liver_function": "",
				}
				historyDetail({
					sick_id: id
				}).then(res => {
					if (res.code == 1) {
						this.isHistoryEdit = res.data ? true : false
						this.form = res.data || form
					}
				})
			},
			// 就医
			getSeeList(id) {
				let params = {
					page: 1,
					limit: 20,
					sick_id: id
				}
				seeList(params).then(res => {
					if (res.code == 1) {

						let arr = []
						res.data.map(item => {
							let imagesArr = item.images.split(',')
							item.imagesArr = imagesArr
							arr.push(item)
						})

						this.medicalRecords = this.physicalReport.concat(arr)
					}
				})
			},
			//  用药
			getMedicineList(id) {
				let params = {
					page: 1,
					limit: 20,
					sick_id: id
				}
				medicineList(params).then(res => {
					if (res.code == 1) {

						let arr = []
						arr = res.data
						this.medicineList = this.medicineList.concat(arr)
					}
				})
			},
			// 体检
			getTijianList(id) {
				let params = {
					page: 1,
					limit: 20,
					sick_id: id
				}
				let arr = []
				tijianList(params).then(res => {
					if (res.code == 1) {
						// this.physicalReport =res.data
						res.data.map(item => {
							let imagesArr = item.images.split(',')
							item.imagesArr = imagesArr
							arr.push(item)
						})

						this.physicalReport = this.physicalReport.concat(arr)
					}
				})
			},
			// 患者详情
			getSickDetail(id) {
				sickDetail({
					sick_id: id
				}).then(res => {
					if (res.code == 1) {
						this.viewInfo = res.data
					}
				})
			},
			// 生活方式详情
			getLiveDetail(id) {
				let liveForm = {
					isSmok: '',
					smokingFrequency: '',
					isTipple: '',
					tippleType: '',
					tippleNum: '',
					taste: '',
					sleep: '',
					movementWeek: '',
					movementTime: ''
				}
				liveDetail({
					sick_id: id
				}).then(res => {
					if (res.code == 1) {
						if (res.data) {
							let is_smoking = res.data.is_smoking?.split(",") || ['', '']
							let is_tipple = res.data.is_tipple?.split(",") || ['', '', '']
							let movement = res.data.movement?.split(",") || ['', '']
							liveForm.isSmok = is_smoking[0]
							liveForm.smokingFrequency = is_smoking[1]
							liveForm.isTipple = is_tipple[0]
							liveForm.tippleType = is_tipple[1]
							liveForm.tippleNum = is_tipple[2]
							liveForm.taste = res.data.taste
							liveForm.sleep = res.data.sleep
							liveForm.movementWeek = movement[0]
							liveForm.movementTime = movement[1]
						}
						this.isLiveEdit = res.data ? true : false
						this.liveForm = {
							...liveForm
						}
					}
				})
			},
			siteHistory(type) {
				let columns = []
				if (type == 'liver_function') {
					columns = [
						[{
								label: '正常',
								id: 1
							},
							{
								label: '肝硬化',
								id: 2
							}
						]
					]
				}
				if (type == 'renal_function') {
					columns = [
						[{
								label: '正常',
								id: 1
							},
							{
								label: '‌肾水肿‌',
								id: 2
							}
						]
					]
				}
				if (type == 'disease_history') {
					columns = [
						[{
								label: '无',
								id: 1
							},
							{
								label: '‌疾病‌',
								id: 2
							}
						]
					]
				}
				if (type == 'family_disease_history') {
					columns = [
						[{
								label: '无',
								id: 1
							},
							{
								label: '遗传病',
								id: 2
							}
						]
					]
				}
				if (type == 'allergy_history') {
					columns = [
						[{
								label: '无',
								id: 1
							},
							{
								label: '皮肤过敏‌',
								id: 2
							},
							{
								label: '其他过敏‌',
								id: 3
							}
						]
					]
				}
				if (type == 'operation_history') {
					columns = [
						[{
								label: '无',
								id: 1
							},
							{
								label: '换牙',
								id: 2
							},
							{
								label: '‌其他‌手术‌',
								id: 3
							}
						]
					]
				}
				if (type == 'defecate') {
					columns = [
						[{
								label: '无',
								id: 1
							},
							{
								label: '一天一次',
								id: 2
							},
							{
								label: '一天两次',
								id: 3
							}
						]
					]
				}
				if (type == 'micturition') {
					columns = [
						[{
								label: '无',
								id: 1
							},
							{
								label: '‌一天一次‌',
								id: 2
							},
							{
								label: '一天‌两次‌',
								id: 3
							},
							{
								label: '一天多次‌',
								id: 3
							},
						]
					]
				}
				this.columns = columns
				this.show = true
				this.historyType = type
			},
			siteLive(type) {
				let columns = []
				if (type == 'isSmok') {
					columns = [
						[{
								label: '不吸烟',
								id: 1
							},
							{
								label: '偶尔',
								id: 2
							},
							{
								label: '经常',
								id: 3
							},
						]
					]
				}
				if (type == 'isTipple') {
					columns = [
						[{
								label: '不喝酒',
								id: 1
							},
							{
								label: '偶尔',
								id: 2
							},
							{
								label: '经常',
								id: 3
							},
						]
					]
				}
				if (type == 'tippleType') {
					columns = [
						[{
								label: '啤酒',
								id: 1
							},
							{
								label: '红酒',
								id: 2
							},
							{
								label: '白酒',
								id: 3
							},
							{
								label: '其他',
								id: 4
							},
						]
					]
				}
				if (type == 'taste') {
					columns = [
						[{
								label: '清淡',
								id: 1
							},
							{
								label: '普通',
								id: 2
							},
							{
								label: '重口味',
								id: 3
							},
						]
					]
				}
				if (type == 'movementWeek') {
					columns = [
						[{
								label: '0次',
								id: 1
							},
							{
								label: '1次',
								id: 2
							},
							{
								label: '1-7次',
								id: 3
							},
							{
								label: '7-15次',
								id: 4
							},
							{
								label: '15次以上',
								id: 5
							},
						]
					]
				}
				if (type == 'sleep') {
					columns = [
						[{
								label: '3小时',
								id: 1
							},
							{
								label: '5小时',
								id: 2
							},
							{
								label: '8小时',
								id: 3
							},
							{
								label: '10小时',
								id: 4
							},
							{
								label: '12小时',
								id: 5
							},
						]
					]
				}
				this.liveColumns = columns
				this.liveShow = true
				this.liveType = type
			},
			linveConfirm(e) {
				this.liveShow = false
				this.liveForm[this.liveType] = e.value[0].label

				let info = {
					sick_id: this.viewInfo.id,
					is_smoking: this.liveForm.isSmok + ',' + this.liveForm.smokingFrequency,
					is_tipple: this.liveForm.isTipple + ',' + this.liveForm.tippleType + ',' + this.liveForm.tippleNum,
					taste: this.liveForm.taste,
					movement: this.liveForm.movementWeek + ',' + this.liveForm.movementTime,
					sleep: this.liveForm.sleep
				}
				if (this.isLiveEdit) {
					this.liveEdit(info)
				} else {
					this.liveAdd(info)
				}

			},
			liveAdd(info) {
				liveAdd(info).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						this.isLiveEdit = true
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			liveEdit(info) {
				liveEdit(info).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						this.isLiveEdit = true
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			confirm(e) {
				this.show = false
				this.form[this.historyType] = e.value[0].label
				let info = {
					...this.form
				}
				info.sick_id = this.viewInfo.id
				delete info.updatetime
				if (this.isHistoryEdit) {
					this.historyEdit(info)
				} else {
					this.historyAdd(info)
				}

			},
			historyEdit(info) {
				historyEdit(info).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						this.isHistoryEdit = true
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			historyAdd(info) {
				historyAdd(info).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						this.isHistoryEdit = true
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

	.list-box {
		height: 90rpx;
	}

	.list-title {
		line-height: 96rpx;
	}

	.list-input {
		height: 100rpx;

		input {
			text-align: right;
		}
	}

	.list-item {
		text {
			margin-left: 16rpx;
		}
	}

	.family-list {
		padding-top: 30rpx;

		.padding-b-30 {
			position: relative;

			&.active {
				.triangle-img {
					display: block;
				}
			}
		}

		.img-box {
			width: 96rpx;
			height: 96rpx;
			max-width: 96rpx;
			border-radius: 48rpx;
			overflow: hidden;
			border: 1px solid #F7F7F7;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.triangle-img {
			display: none;
			position: absolute;
			bottom: -6rpx;
			left: 50%;
			transform: translateX(-50%);

			image {
				width: 18rpx;
				height: 18rpx;
			}
		}

		.role-box {
			min-width: 70rpx;
			height: 30rpx;
			padding: 0 5rpx;
			margin-top: 5rpx;
			background: rgba(239, 251, 254, 0.22);
			border-radius: 4rpx;
			border: 1px solid #43ABC4;
			text-align: center;
			line-height: 30rpx;

			&.bg-o {
				background: #FF7A3A;
			}
		}
	}

	.edit-box {
		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.base-info {
		justify-content: space-around;
		padding: 26rpx 0;
		background: #EFFBFE;
	}

	.main-content {
		border-radius: 14rpx 14rpx 0 0;
	}

	.family-list {
		.only-1 {
			max-width: 120rpx;
		}
	}

	.medication-list {
		background: #F4FCFE;
		border: 1px dashed #43ABC4;
		font-size: 26rpx;
		color: #000;

		.name {
			font-weight: 500;
			font-szie: 32rpx;
			margin-bottom: 10rpx;
		}

		.line {
			height: 1px;
			background-color: #DBDBDB;
			margin: 20rpx 0;
		}

		.time {
			width: 280rpx;
		}

		.flex-column {
			font-size: 24rpx;
			color: #707070;

			text {
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #000;

			}
		}
	}
</style>